<template>
    <div>
        <el-row>
            <el-col :span="24"> {{message}} </el-col>
        </el-row>
        <el-row>
            <el-col :span="8"><el-input v-model="out_trade_no"/> </el-col>
            <el-col :span="4"><el-button type="primary" @click="genWorkerIds()">Idworker生成</el-button></el-col>
        </el-row>
        <el-row>
            <el-col :span="4"><el-input v-model="total_amount"/></el-col>
            <el-col :span="4"><el-input v-model="subject"/></el-col>
            <el-col :span="4"><el-input v-model="body"/></el-col>
            <el-col :span="4"><el-button type="primary" @click="alipay_trade_page_pays()">支付宝支付</el-button></el-col>
        </el-row>
        <el-row>
            <el-col :span="8"><span> {{alipay_trade_query_result}}</span></el-col>
            <el-col :span="4"><el-button type="primary" @click="alipay_trade_querys">支付状态查询</el-button></el-col>
        </el-row>
    </div>
</template>

<script>
import axios from "axios";

import {genWorkerId,alipay_trade_page_pay,alipay_trade_query} from "../../../api/alipay/pay.js";
export default {
    data(){
        return{
            total_amount:1000,
            out_trade_no:0,
            subject:'购买XXX',
            body:'测试',
            message:'',
            alipay_trade_query_result:'',
            alipay_trade_page_pay_result:''
        }
    },
    methods:{
        genWorkerIds(){
          genWorkerId().then(res=>{
                if(res.data){
                    this.out_trade_no = res.data;
                }
            })
        },
        alipay_trade_page_pays(){
          alipay_trade_page_pay(this.out_trade_no,this.total_amount,this.subject).then(res=>{
               if(res.data){
                 debugger
                    let form = res.data;
                    //创建容器将返回的表单放进去然后新开一个页面
                    const div = document.createElement('div')
                    div.innerHTML = form//此处form就是后台返回接收到的数据
                    document.body.appendChild(div)
                    document.forms[0].setAttribute('target','_blank');//或者 myForm.target='_parent';
                    document.forms[0].submit()
                }else{
                    this.message = res.data;
                }
            })
        }     ,
        alipay_trade_querys(){
          alipay_trade_query(this.out_trade_no).then(res=>{
               if(res.data){
                    this.alipay_trade_query_result = res.data;

                }
            })
        }

    }
    ,
    mounted(){
        // this.genWorkerIds();
    }
}
</script>

